<template>
    <table border="1">
        <thead>
            <tr>
                <th v-for="(item, index) in tableHeader" :key="index">{{ item.title }}</th>

            </tr>
        </thead>
        <tbody>
            <tr v-for="(item, index) in TableBody" :key="index">
                <td>{{ item.currentDate + ' ' + item.workforceShiftName }}</td>
                <td>{{ item.userName }}</td>
                <td>{{ item.hasClockin == 0 ? '未打卡' : '已打卡' }}</td>
                <td><span v-if="item.clockinDatetime && item.clockoutDatetime">{{
                    $moment(item.clockinDatetime).format('LT').slice(0, 4) +
                    ' ' + $moment(item.clockoutDatetime).format('LT').slice(0, 4) }}</span></td>

            </tr>
        </tbody>
    </table>
</template>
<script>
export default {
    props: ['tableHeader', 'TableBody'],
    data() {
        return {

        }
    },

    methods: {


    },
}
</script>
<style lang="less" scoped>
.el-pagination {

    .btn-next,
    .btn-prev {
        border: 0px !important;
    }

}

table {
    width: 1665px;
    background: linear-gradient(60deg, #021130 0%, #010D2A 100%);
    opacity: 1;
    border: 1px solid #00469C;
    border-collapse: collapse;
    font-size: 10px;

    thead {
        width: 1572px;
        color: white;

        tr {

            height: 40px;
            color: white;
            font-size: 13px;
            font-family: SourceHanSansCN-Regular, SourceHanSansCN;
            font-weight: 400;
            color: #FFFFFF;
            background: rgba(11, 111, 189, 0.48);


            th {
                color: white;
                text-align: center;
                width: 10%;
                border: 1px solid #00469C;
            }
        }

    }

    tbody {
        width: 1572px;
        color: white;

        tr {
            border: 1px solid #00469C;
            height: 44px !important;

            td {
                font-size: 14px;
                text-align: center;
                font-family: SourceHanSansCN-Regular, SourceHanSansCN;
                font-weight: 400;
                color: #BDE5FD;
                padding-left: 10px;
                border: 1px solid #00469C;


            }
        }

        tr:nth-child(even) {
            background: rgba(11, 111, 189, 0.22) !important;


            td {
                color: #BDE5FD;
            }
        }

    }

}

.casdf {
    cursor: pointer;

}
</style>